<template>
  <div id="heat-container">
    <!-- 热力图层 -->
  </div>
</template>

<script>
import Heatmap from "./heatmap.js";
import Heatgrid from "./heatgrid.js";
import Text from "ol/style/Text";
import { Fill, Stroke, Style } from "ol/style";
// import Heatmap from 'ol/layer/Heatmap'
// import GeoJSON from 'ol/format/GeoJSON'
// import VectorSource from 'ol/source/Vector'
// import Feature from 'ol/Feature'
// import Point from 'ol/geom/Point'
// import { transform, getTransform } from 'ol/proj' // 坐标转换

export default {
  mixins: [Heatmap, Heatgrid], // mapStyle, mapFlash
  data() {
    return {
      oMap: null, // 地图对象
      sSRS: "EPSG:4326", // 空间参照系（Spatial Reference System)
      heatmapLayer: null, // 热力层，所有操作在此组件中完成，故放此处
      sType: null, // 热力层的类型（heatmap,gridheat）
      nMax: 2000, // {Number}热力值最大取值范围
      aGradient: ["#00f", "#0ff", "#0f0", "#ff0", "#f00"], // 默认热力图的颜色阈值
      sAttach: null, // 相关热力图关联的文件，如：gridheat关联的网格数据
      // nHotID: null // 选中的热力数据（网格）ID
      // aStyleList: null
    };
  },
  watch: {
    // watch
  },
  mounted() {
    // mounted
  },
  methods: {
    /**
     * @description 显示热力图（根据不同类型分别展示，heatmap，gridheat）
     * @param oSource {Object} 热力图数据, oMap {Object} 地图数据 nIdx {Number} 时间索引(保留)
     * @return null
     */
    showHeatData(oSource, oMap, nIdx = 0) {
      // 数据有效检查
      if (!oSource || oSource.length === 0) {
        // || JSON.stringify(oSource) === '{}'
        return; // 没有数据作处理
      }
      if (JSON.stringify(oSource[0]) === "{}") return; // 返回数据中的第一个数据元素[{0},{1}...{23}] 计划分24个小时数据

      // 获取数据类型（heatmap，gridheat）；不同类型热力图数据处理方式不同
      const sDataType = oSource[0].dataType;
      if (this.oMap === null) {
        this.oMap = oMap;
      }
      // 热力图层未创建，需要初始化
      if (this.heatmapLayer === null) {
        this.initHeatmapLayer(sDataType);
      } else {
        if (sDataType !== this.sType) {
          // 当前数据类型与之前数据类型不同，需要删了图层重新创建
          this.destroyHeatmapLayer();
          this.initHeatmapLayer(sDataType);
        }
      }
      switch (sDataType) {
        case "heatmap":
          this.clearHeatData(); // 先清空原来的数据，然后重新绘制
          this.showHeatmap(oSource, nIdx);
          break;
        case "heatgrid":
          // 不能清除数据，因为source中主要保存的是网格，颜色需要更新
          this.showHeatGrid(oSource, nIdx);
          break;
      }
    },

    /**
     * @description 初始化heatmap层
     * @param sDataType {String} 热力图数据类型
     * @return null
     */
    initHeatmapLayer(sDataType) {
      console.log(sDataType);
      switch (sDataType) {
        case "heatmap":
          this.heatmapLayer = this.creatHeatmap();
          break;
        case "heatgrid":
          this.heatmapLayer = this.createHeatGrid();
          break;
        default:
          console.log("数据格式错误！");
          this.creatHeatmap();
      }
      if (this.heatmapLayer) {
        // 记录当前热力图类型
        this.sType = sDataType;
        // 将热力图层添加到地图对象
        this.heatmapLayer.set("name", "heatmapLayer");
        this.oMap.addLayer(this.heatmapLayer);
        // 调整层级关系
        this.heatmapLayer.setZIndex(7);
      }
    },

    /**
     * @description 销毁heatmap层；
     * @param null
     * @return null
     */
    destroyHeatmapLayer() {
      if (this.heatmapLayer) {
        const heatSource = this.heatmapLayer.getSource();
        heatSource.clear();
        // 其他内容是否也要销毁
        this.oMap.removeLayer(this.heatmapLayer);
        this.heatmapLayer = null;
      }
      if (this.sAttach) {
        this.sAttach = null;
      }
      if (this.sType === "heatgrid") {
        if (this.aGridStyleLs.length > 0) {
          this.aGridStyleLs.splice(0, this.aGridStyleLs.length);
        }
      }
    },

    /**
     * @description 清空热力数据
     * @param  null
     * @return null
     */
    clearHeatData() {
      // 清空POI数据
      if (this.heatmapLayer) {
        const heatSource = this.heatmapLayer.getSource();
        heatSource.clear();
      }
    },

    /**
     * @description 获取当前热力图类型
     * @param  null
     * @return {String} // 热力图类型
     */
    getHeatmapType() {
      let sType = this.sType;
      if (sType) {
        sType = sType.toLowerCase();
      }
      return sType;
    },

    /**
     * @description 点击热力数据（热力网格）
     * @param  null
     * @return null
     */
    // clickHot(hotID) {
    //   let hotFeature = null
    //   // 如果之前有选择，先删除
    //   if (this.nHotID) {
    //     hotFeature = this.heatmapLayer.getSource().getFeatureById(this.nHotID)
    //     if (hotFeature) {
    //       hotFeature.getStyle().setText('')
    //     }
    //     this.nHotID = null
    //   }
    //   hotFeature = this.heatmapLayer.getSource().getFeatureById(hotID)
    //   if (hotFeature) {
    //     let nhotVal = hotFeature.get('iVal')
    //     let txtStyle = null
    //     if (nhotVal) {
    //       txtStyle = new Text({ // ol.style.Text
    //         font: '12px Calibri,sans-serif',// font: '10px sans-serif' 默认这个字体，可以修改成其他的，格式和css的字体设置一样
    //         text: nhotVal,
    //         fill: new Fill({ // ol.style.Fill
    //             color: '#000'
    //         }),
    //         stroke: new Stroke({ // ol.style.Stroke
    //           color: '#fff',
    //           width: 1
    //         })
    //       })
    //       hotFeature.getStyle().setText(txtStyle)
    //       console.log(hotFeature.getStyle().getText())

    //     } else {
    //       // hotFeature.getStyle().setText('0')
    //     }
    //     this.nHotID = hotID
    //   }
    // }

    // 当前方法
  },
};
</script>

<style lang="scss">
// 添加闪烁样式
.css_animation {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: cssflash 3s;
  animation-iteration-count: infinite;
}

@keyframes cssflash {
  to {
    transform: scale(2);
    background: rgba(0, 0, 0, 0);
  }
}
.marker {
  background-position: center center;
  width: 20px;
  height: 20px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  p {
    background-color: rgba(250, 0, 0, 0.2);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: myfirst 1.4s infinite;
    box-shadow: 0px 0px 2px #f00;
  }
}

@keyframes myfirst {
  to {
    transform: scale(8);
  }
}
</style>
